<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>欢迎登录后台管理系统</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>

    <link href="./bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <!--<script language="JavaScript" src="js/jquery.js"></script>-->
    <script src="js/cloud.js" type="text/javascript"></script>
    <script src="./bootstrap/js/bootstrap.js" type="text/javascript"></script>

    <script language="javascript">
        $(function () {
            $('.loginbox').css({'position': 'absolute', 'left': ($(window).width() - 692) / 2});
            $(window).resize(function () {
                $('.loginbox').css({'position': 'absolute', 'left': ($(window).width() - 692) / 2});
            })
        });

        //商家注册提交错点击的时候执行的函数，来判断商家填账号和密码了没有
        function subReg() {
            let account = document.getElementById('inputAccount').value;
            let password = document.getElementById('inputPassword').value;
            let repassword = document.getElementById('inputPasswordConf').value;

            if (account == '' || password == '' || repassword == '') {
                document.getElementById("tipmessReg").innerHTML = '请填写完整';
                alert('账号或者密码为空');
                //返回的意思是运行到下一行就暂定，不要再继续，为什么不能继续？因为这里是判断已经为空，需要让用户再次填写

            } else {
                if (password != repassword) {

                    document.getElementById("tipmessReg").innerHTML = '两次密码不一致';

                } else {
                    //账号和密码都一致，判断账号是否已经存在
                    //获取账号
                    let account = document.getElementById('inputAccount').value;
                    //发送ajax请求
                    let obj = {account: account, passwd: password};
                    $.ajax({
                        url: 'consumer/add',//后台商家注册的地址
                        type: 'post',//后台接口的请求方式
                        data: JSON.stringify(obj),//JSON对象 转JSON字符串
                        dataType: 'json',//后端给前端返回的数据格式
                        contentType: 'application/json',//前端给后端的返回数据格式
                        success: function (data) {
                            if (data.code == 200) {
                                //注册成功可以登录
                                document.getElementById("tipmessReg").innerHTML = "注册成功，请登录";

                            } else {
                                //账号已经存在，不能注册，返回
                                document.getElementById("tipmessReg").innerHTML = "账号已经存在，请重新注册";

                            }

                        }
                    })
                }
            }

        }

        function subLogin() {
            let account = document.getElementById('inputAccountLogin').value;
            let password = document.getElementById('inputPasswordLogin').value;
            if (account == '' || password == '') {
                document.getElementById("tipmessLogin").innerHTML = '账号或密码请填写完整';

            } else {
                let obj = {account: account, passwd: password};
                $.ajax({
                    url: 'consumer/login',//后台商家注册地址
                    type: 'post',//后台接口的请求方式
                    data: JSON.stringify(obj),//JSON对象转JSON字符串
                    dataType: 'json',//后端给前端返回的数据格式
                    contentType: 'application/json',//前端给后端的返回数据格式
                    success: function (data) {
                        if (data.code == 200) {
                            //登录成功，界面跳转到系统内部
                            window.location.href = 'consumer.html?refresh=' + new Date().getTime();

                        } else {
                            document.getElementById("tipmessLogin").innerHTML = "账号密码不正确,请核实...";


                        }
                    }


                })
            }


        }


        function loadGoodsList() {
            $.ajax({
                url: 'consumer/findAll',
                type: 'get',
                dataType: 'json',
                success: function (response) {
                    if (!(!response || !response.data || !Array.isArray(response.data))) {
                        const blockContentDiv = document.querySelector('.block-content');
                        response.data.forEach((goodsItem) => {
                            const goodsListDiv = document.createElement('div');
                            goodsListDiv.classList.add('goods-list');

                            const goodsBlockDiv = document.createElement('div');
                            goodsBlockDiv.classList.add('goods-block');

                            const goodsImg = document.createElement('img');
                            goodsImg.src = goodsItem.gimg || './default_image.png';
                            goodsImg.alt = '';
                            goodsImg.classList.add('goods-img');
                            goodsBlockDiv.appendChild(goodsImg);

                            const footDiv1 = document.createElement('div');
                            footDiv1.classList.add('foot','mt20');

                            const goodsNameDiv = document.createElement('div');
                            goodsNameDiv.classList.add('goods-name');
                            goodsNameDiv.textContent = goodsItem.gname;
                            footDiv1.appendChild(goodsNameDiv);

                            const addCardImg = document.createElement('img');
                            addCardImg.src = './images/cart.png';
                            addCardImg.alt = '';
                            addCardImg.classList.add('add-card');
                            footDiv1.appendChild(addCardImg);
                            goodsBlockDiv.appendChild(footDiv1);

                            const footDiv2 = document.createElement('div');
                            footDiv2.classList.add('foot','mt20');

                            const newPriceDiv = document.createElement('div');
                            newPriceDiv.classList.add('new-price');
                            newPriceDiv.textContent = goodsItem.gprice + "元";
                            footDiv2.appendChild(newPriceDiv);

                            const oldPriceDiv = document.createElement('div');
                            oldPriceDiv.classList.add('old-price');
                            oldPriceDiv.textContent = "";
                            footDiv2.appendChild(oldPriceDiv);
                            goodsBlockDiv.appendChild(footDiv2);


                            const introDiv = document.createElement('div');
                            introDiv.classList.add('goods-intro');
                            introDiv.textContent = goodsItem.gintro;
                            goodsBlockDiv.appendChild(introDiv);

                            goodsListDiv.appendChild(goodsBlockDiv);
                            blockContentDiv.appendChild(goodsListDiv);
                        });
                    } else {
                        console.log("后端返回的数据格式不正确，期望数组但实际为：", response);

                    }
                },
                error: function () {
                    console.log("获取商品列表数据失败");

                }
            });
        }


        $(document).ready(function () {
            loadGoodsList();
        });

    </script>

    <style>

        .block-content {
            display: flex;
            flex-wrap: wrap;
        }

        .goods-list {
            width: 25%;
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .goods-block {
            width: 260px;
            padding: 0 30px;
        }

        .goods-img {
            width: 200px;
            height: 200px;
        }

        .foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .add-card {
            width: 30px;
            height: 30px;
        }

        .mt20 {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<!--消费者页面的顶部导航-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">淘宝</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" data-toggle="modal" data-target="#consumerRegisterModal">注册</a></li>
                <li><a href="#" data-toggle="modal" data-target="#consumerLoginModal">登录</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">退出系统 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="login.html">安全退出</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<!-- 商品列表容器 -->
<div class="block-content">
    <!-- 这里通过JavaScript动态添加商品，初始时留空，等待数据加载后填充 -->

</div>




<!--消费者注册模态框 -->
<div aria-labelledby="myModalLabelReg" class="modal fade" id="consumerRegisterModal" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabelReg">用户注册</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="inputAccount">账号</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="inputAccount" placeholder="请输入登陆账号" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="inputPassword">密码</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="inputPassword" placeholder="请输入密码" type="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="inputPasswordConf">确认密码</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="inputPasswordConf" placeholder="请确认密码"
                                   type="password">
                        </div>
                    </div>
                    <span id="tipmessReg" style="color: red"></span>
                </form>
            </div>
            <div class="modal-footer">

                <button class="btn btn-default" data-dismiss="modal" type="button">取消</button>
                <button class="btn btn-success" onclick="subReg()" type="button">注册</button>
                <!--          <button class="btn btn-primary" onclick="subReg()" type="button">注册</button>-->
            </div>
        </div>
    </div>
</div>

<!--消费者登录的模态框 -->
<div aria-labelledby="myModalLabelLogin" class="modal fade" id="consumerLoginModal" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabelLogin">用户登录</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="inputAccountLogin">账号</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="inputAccountLogin" placeholder="请输入登陆账号" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="inputPassword">密码</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="inputPasswordLogin" placeholder="请输入密码" type="password">
                        </div>
                    </div>
                    <span id="tipmessLogin" style="color: red"></span>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">取消</button>
                <button class="btn btn-success" onclick="subLogin()" type="button">登录</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>